/**
 * 3ds码查询
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>3ds码查询</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock">
      <div class="serachTop">
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
          <el-form-item >
            <el-input
              size="small"
              v-model="formInline.cardNo"
              placeholder="输入卡号后四位"
              type="number"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="请输入使用者ID"
                type="number"
                v-if='hasPermission'
                clearable
              ></el-input>
            </el-form-item> 
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >
              搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
       <!--列表-->
      <div class="ra_box">
        <el-table
          size="small"
          :data="listData"
          highlight-current-row
          v-loading="loading"
          element-loading-text="拼命加载中"
          style="width: 100%"
          v-if="listData"
        >
          <el-table-column
             prop="parentUserId"
            label="所有者ID"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="userId"
            label="使用者ID"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column prop="cardNo" label="卡号" show-overflow-tooltip>
          </el-table-column> 
          <el-table-column
            prop="transactionAmount"
            label="交易金额"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>
                {{ b(scope.row.transactionAmount) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="transactionCurrency"
            label="交易币种"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="merchantName"
            label="商户名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="otp" label="验证码" show-overflow-tooltip>
            <template slot-scope="scope"> 
              <i class="el-icon-view" v-if="!scope.row.otp" @click="getShowOpt(scope.$index, scope.row)"></i>  
              <div v-else>{{ scope.row.otp }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="publishedAt"
            label="发送时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>{{ timestampToTime(scope.row.publishedAt) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="publishedAt"
            label="失效时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>{{ timestampToTime(scope.row.publishedAt, 10 * 60) }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column> -->
        </el-table>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
    
   
    <!-- 编辑界面 -->
    <el-dialog
      :close-on-click-modal="false"
      title="查看"
      :visible.sync="editFormVisible"
      width="30%"
      @close="closeDialog"
    >
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-form-item label="卡号" prop="cardNo">
          {{ editForm.cardNo }}
        </el-form-item>
        <el-form-item label="交易金额" prop="transactionAmount">
          {{ b(editForm.transactionAmount) }}
        </el-form-item>
        <el-form-item label="交易币种" prop="transactionCurrency">
          {{ editForm.transactionCurrency }}
        </el-form-item>
        <el-form-item label="商户名称" prop="merchantName">
          {{ editForm.merchantName }}
        </el-form-item>
        <el-form-item label="验证码" prop="otp">
          {{ editForm.otp }}
        </el-form-item>
        <el-form-item label="发送时间" prop="publishedAt">
          {{ timestampToTime(editForm.publishedAt) }}
        </el-form-item>
        <el-form-item label="失效时间" prop="publishedAt">
          {{ timestampToTime(editForm.publishedAt, 10 * 60) }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam"></codeChoose>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
  reqJson
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false,
      addFormVisible: false,
      editFormVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      editForm: {},
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardNo: "",
        type: "",
        userId: "",
      },
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission:false,
      userInfo:{}, 
      headers:'',
      verArry:[],
      verType:'',
      curItem:'', 
      curIndex:0,
      totalStatus:'',
      cvvShow:true

    };
  },
  // 注册组件
  components: {
    Pagination,
    codeChoose
  },
  created() {
    this.getdata(this.formInline);
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user);
      this.hasPermission = this.$hasPermission(this.userInfo,['common'])  
    } 
  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
      this.verArry = this.userInfo.verifyApi.split(',')
      this.hasPermission = this.$hasPermission(this.userInfo,['common'])  
    },
  }, 
  methods: {
    getParam(val,type){ 
      this.headers = val 
      this.getOtp(this.curIndex,this.curItem)
    }, 

    getShowOpt(index,item){     
      this.verArry = this.userInfo.verifyApi.split(',')
      if(this.verArry.includes('/api/wf/getOtp')){
        // this.verType = 'cvv';
        this.curItem = item;
        this.curIndex = index;
        this.$refs.codeRef.openDialog();  
      }else{
        this.getOtp(index,item)
      } 
    },
    getOtp(index,item){
      reqJson('get',"/api/wf/getOtp?id=" + item.id, { 
      },{
        headers:{
          ...this.headers
        }
      }) .then((res) => {
          this.loading = false;
          if (res.code == 0) { 
            this.listData[index].otp = res.data.otp;
            this.$forceUpdate();
           }else{
            this.$message({
              type: "error",
              message: spStr(res.msg, "PhotonPay", ""),
            });
           }
      }).catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    getdata(parameter) {
      let url = getUrl(parameter);
      service
        .get("/api/wf/otpList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "error",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.editForm = row;
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
</style>

 
 